"use strict";

!function () {

	// 包含全体点的容器
	var $tagDot = $(".dot-container").eq(0)
	// 创建按钮的容器

	,
	    $buttonParent = $(".button")
	// 移动的大容器

	,
	    $tagMoveContainer = $(".contain").eq(0)
	// 索引和标志

	,
	    itemIndex = -1
	// 本质是判断，鼠标是否在button上面。去除这个判断会导致，鼠标从外部移入的第一次跳转跳两个页面

	,
	    buttonFlag = 0
	// 定时器的标志。有些时候需要清除定时器

	,
	    runflag = 0
	// 图片的长度

	,
	    imgWidth = 600
	// 图片的数量，抽象起来的话就是容器容纳的个数

	,
	    $containerNum = $("img").length
	// 判断向前还是向后

	,
	    directionFlag = 0
	// 取得具体的容器，这和最开始的容器不能互换，因为我是监听事件，大容器里有很多小容器

	,
	    $tagContainer = $(".container").eq(0)
	// 第一次加载的时候不移动

	,
	    firstFlag = 0;

	// 清空所有的active类，这里可以用兄弟节点进行优化的，比如找到一个节点，吧所有节点的actiove都清除掉。就和我之前的逻辑有点不同，我之前是先清除掉所有，然后给itemindex给上active，现在是先找到itemindex加上active，然后通过兄弟节点进行全部删除
	function mapRemove(sameEl, className) {
		var tagEl = $(sameEl);
		tagEl.each(function () {
			$(this).removeClass(className);
		});
	}

	// 删除所有的active并给当前增加
	function setActive() {
		mapRemove(".dot", "active");
		var index = itemIndex;
		// index等于5说明是第六张，这个时候要等同于给第一张设置active
		if (index === 5) {
			index = 0;
		}
		var tag = $(".dot").eq(index);
		tag.addClass("active");
	}

	// 调用数据
	function init() {
		$.ajax({
			type: "GET",
			url: "../json/data.json",
			data: "",
			dataType: "json",
			success: function success(res) {
				var imgArray = res.imgArray,
				    length = imgArray.length;
				imgArray.push(imgArray[0]);
				var str = "",
				    dotstr = "";
				imgArray.forEach(function (element) {
					str += "<img src = \"" + element.picUrl + "\" alt=\"" + element.picAlt + "\" class=\"img\">";
				});
				$tagMoveContainer.html(str);
				for (var i = 0; i != length; i++) {
					dotstr += "<div class = \"dot\" data-index = \"" + i + "\">" + (i + 1) + "</div>";
				}
				$tagDot.html(dotstr);
				bindEvent();
				run();
			},
			errot: function errot(res) {
				console.log("wrong" + res);
			}
		});
		// 执行绑定事件
	}
	// 索引加一
	function addItermIndex() {
		itemIndex = ++itemIndex > 5 ? 0 : itemIndex;
	}
	// Add 可以用if优化var idx = n > max ? 0 : n;
	// 索引减一
	function cutItermIndex() {
		itemIndex = --itemIndex < 0 ? 5 : itemIndex;
	}

	// 清除定时器
	function myClear(flag) {
		if (flag) {
			clearTimeout(flag);
		}
	}

	// 求出目标距离并跳转加活跃类
	function moveAndAdd() {
		var tagpos = -itemIndex * imgWidth;
		moveTo(tagpos);
		setActive();
	}

	// 对dot绑定点击事件。清空所有active，然后对特定的绑定active
	function bindDot() {
		$tagDot.on("click", function (e) {
			myClear(runflag);
			var target = $(e.target),
			    tempIndex = parseInt(target.data("index"));
			if (target.hasClass("dot")) {
				// 相同就不进行改变
				if (itemIndex === tempIndex) {
					return;
					// 最后向前跳的时候，如果是第一页，那么不应该变化，并且吧位置归0
				} else if (itemIndex === 5) {
					if (itemIndex - tempIndex === 5) {
						$tagMoveContainer.css("left", "0px");
						itemIndex = 1;
						// 如果是第二页，那么就让他从第一页开始
					} else if (tempIndex === 1) {
						$tagMoveContainer.css("left", "0px");
						itemIndex = 1;
						moveAndAdd();
					} else {
						itemIndex = tempIndex;
						moveAndAdd();
					}
				} else {
					itemIndex = tempIndex;
					moveAndAdd();
				}
			} else {
				return;
			}
		});
	}

	// 对前后按钮绑定点击事件
	function bindButton() {
		$buttonParent.on("click", function (e) {
			myClear(runflag);
			var target = e.target;
			if (target.className === "up") {
				// 因为每次鼠标移入的时候其实itemindex已经加1了。也就是，如果我一直在按钮上面点的话，只需要减一次，如果是从外部移到按钮上面的话，需要减少两次，这里的buttonFlag就是标志位，我每次鼠标移出的时候buttonFlag就置1，移入的时候就清零
				if (buttonFlag === 0) {
					cutItermIndex();
				} else {
					cutItermIndex();
					buttonFlag = 0;
				}
			} else if (target.className === "down") {
				// 这个和向前按钮同理，如果已经加一了，就不变，否则索引加1.
				if (buttonFlag === 0) {
					addItermIndex();
				} else {
					buttonFlag = 0;
				}
			} else {
				return;
			}
			if (itemIndex === 0) {
				if (directionFlag === 0) {
					$tagMoveContainer.css("left", "0px");
					itemIndex = 1;
				}
			}
			if (itemIndex === 5) {
				if (directionFlag === 1) {
					$tagMoveContainer.css("left", "-3000px");
					itemIndex = 4;
				}
			}
			if (itemIndex === $containerNum - 1) {
				if (directionFlag === 1) {
					$tagMoveContainer.css("left", -($containerNum - 1) * imgWidth + 'px');
					// 因为会自动加1
					itemIndex = $containerNum - 2;
				}
			}
			moveAndAdd();
		});
	}

	// 鼠标暂停
	function mousehover() {
		$tagContainer.on("mouseenter", function () {
			buttonFlag = 0;
			myClear(runflag);
		});
		$tagContainer.on("mouseleave", function () {
			buttonFlag = 1;
			run();
		});
		var up = $(".up");
		up.on("mouseenter", function () {
			directionFlag = 1;
		});
		up.on("mouseleave", function () {
			directionFlag = 0;
		});
	}

	// 绑定函数
	function bindEvent() {
		bindDot();
		bindButton();
		mousehover();
	}

	// 运动函数
	function moveTo(endPos) {
		var element = $tagMoveContainer;
		myClear(element.move);
		var startPos = parseInt($(element).css("left"));
		if (startPos === endPos) {
			return true;
		}
		if (startPos < endPos) {
			startPos += 5;
		}
		if (startPos > endPos) {
			startPos -= 5;
		}
		element.css("left", startPos);
		element.move = setTimeout(function () {
			moveTo(endPos);
		}, 1);
	}

	// 运动
	function run() {
		addItermIndex();
		moveAndAdd();
		if (itemIndex === 0) {
			$tagMoveContainer.css("left", '0px');
			if (directionFlag === 0 && firstFlag === 1) {
				itemIndex = 1;
				moveAndAdd();
			}
			firstFlag = 1;
		}
		runflag = setTimeout(run, 3000);
	}
	// 执行
	init();
}();